<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>成语页面</title>
    <link rel="stylesheet" href="bootstrap-4.6.1-dist/css/bootstrap.min.css">
    <style>
        body{
            background-image: url("image/background_img.jpg");
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-size: cover;
        }
        .card a{
            color: black;
        }
        .card-body .pinyin{
            color: #CB442D;
            font-weight: bolder;
            font-size: 13px;
        }
        .card-body{
            font-size: 13px;
            color: #866060;
        }
    </style>
</head>
<body>
    <header id="header"></header>

    <div class="container">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="/">首页</a></li>
                <li class="breadcrumb-item active" aria-current="page">成语大全</li>
            </ol>
        </nav>

         <div class="row" id="idiom">
             <div class="col col-sm-12 col-lg-12">
                 <div class="card mt-3">
                     <div class="card-body" v-for="idiom in idioms">
                         <h6><a :href="'idionDetail.html?'+idiom.title"><strong v-text="idiom.title">哀哀父母</strong></a>「<a :href="'idionDetail.html?'+idiom.title" class="pinyin" v-text="idiom.pinyin">āi āi fù mǔ</a>」</h6>
                         <span v-text="idiom.txt">可哀呀可哀，我的父母啊！原指古时在暴政下人民终年在外服劳役，对父母病痛、老死不能照料而悲哀。</span>
                         <p class="dropdown-divider"></p>
                     </div>
                 </div>
                 <!--<div class="card mt-3">
                     <div class="card-body d-flex">
                         <div class="ml-1 w-100">
                             <h6 class="card-title"><a href=""><strong>哀哀欲绝</strong></a>「<a href="" class="pinyin">āi āi yù jué</a>」</h6>
                             <p class="ml-1 d-flex w-100 first">绝：断气，死。形容极其悲痛。</p>
                         </div>
                     </div>
                 </div>
                 <div class="card mt-3">
                     <div class="card-body d-flex">
                         <div class="ml-1 w-100">
                             <h6 class="card-title"><a href=""><strong>哀哀欲绝</strong></a>「<a href="" class="pinyin">āi āi yù jué</a>」</h6>
                             <p class="ml-1 d-flex w-100 first">绝：断气，死。形容极其悲痛。</p>
                         </div>
                     </div>
                 </div>
                 <div class="card mt-3">
                     <div class="card-body d-flex">
                         <div class="ml-1 w-100">
                             <h6 class="card-title"><a href=""><strong>哀哀欲绝</strong></a>「<a href="" class="pinyin">āi āi yù jué</a>」</h6>
                             <p class="ml-1 d-flex w-100 first">绝：断气，死。形容极其悲痛。</p>
                         </div>
                     </div>
                 </div>
                 <div class="card mt-3">
                     <div class="card-body d-flex">
                         <div class="ml-1 w-100">
                             <h6 class="card-title"><a href=""><strong>哀哀欲绝</strong></a>「<a href="" class="pinyin">āi āi yù jué</a>」</h6>
                             <p class="ml-1 d-flex w-100 first">绝：断气，死。形容极其悲痛。</p>
                         </div>
                     </div>
                 </div>
                 <div class="card mt-3">
                     <div class="card-body d-flex">
                         <div class="ml-1 w-100">
                             <h6 class="card-title"><a href=""><strong>哀哀欲绝</strong></a>「<a href="" class="pinyin">āi āi yù jué</a>」</h6>
                             <p class="ml-1 d-flex w-100 first">绝：断气，死。形容极其悲痛。</p>
                         </div>
                     </div>
                 </div>-->

                 <nav class="mt-3">
                     <ul class="pagination pagination-sm  justify-content-center">
                         <li class="page-item">
                             <a class="page-link" aria-label="Previous" href="" @click.prevent="loadIdiom(pageinfo.prePage)" v-show="!pageinfo.isFirstPage==true">
                                 <span aria-hidden="true">&laquo;</span>
                                 <span class="sr-only">上一页</span>
                             </a>
                         </li>
                         <li class="page-item" v-for="n in pageinfo.navigatepageNums">
                             <a class="page-link" href="" v-text="n" @click.prevent="loadIdiom(n)"
                                :class="{'bg-secondary text-light': n == pageinfo.pageNum}">1</a>
                         </li>
                         <li class="page-item "><a class="page-link" href="">
                             <span aria-hidden="true">当前页<span  v-text="pageinfo.pageNum">5</span></span>
                         </a></li>
                         <li class="page-item ">
                             <a class="page-link" aria-label="Next" href="" @click.prevent="loadIdiom(pageinfo.nextPage)" v-show="!pageinfo.isLastPage==true">
                                 <span aria-hidden="true">&raquo;</span>
                                 <span class="sr-only">下一页</span>
                             </a>
                         </li>

                         <li class="page-item" >
                             <span aria-hidden="true">跳转到</span>
                             <input type="text" style="width: 40px" id="page"><button @click.prevent="JumpAuthor()">跳转</button>
                         </li>
                     </ul>
                 </nav>
             </div>
         </div>

    </div>
    </div>

    <footer id="footer"></footer>
</body>
<!--引入jq代码-->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="bootstrap-4.6.1-dist/js/bootstrap.min.js"></script>
<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- 引入axios 实现页面的异步请求-->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
    $("#header").load("common/navigation.html")
    $("#footer").load("common/footer.html")

    let vm_idiom = new Vue({
        el:"#idiom",
        data:{
            idioms:[],
            pageinfo:{},
            pages:""
        },
        methods:{
            loadIdiom:function (pageNum) {
                if (!pageNum){
                    pageNum = 1
                }
                axios({
                    url:"/idiom/selectList",
                    method:"get",
                    params:{
                        pageNum:pageNum
                    }
                }).then(function (r) {
                    vm_idiom.idioms = r.data.list
                    vm_idiom.pageinfo = r.data
                    vm_idiom.pages = r.data.pages
                    //console.log(JSON.stringify(r.data))
                })
            },
            JumpAuthor:function () {
                var page = document.getElementById("page").value;
                if (page <= vm_idiom.pageinfo.pages && page > 0){
                    this.loadIdiom(page)
                }else {
                    alert("页码不对，请重新输入！！最大页码: " +vm_idiom.pages)
                    $("#page").val('')
                }
            }
        },
        created:function () {
            this.loadIdiom(1);
        }
    })
</script>
</html>